import { Flex, Radio, RadioChangeEvent, RadioGroupProps } from 'antd';
import { CSSProperties, FC, PropsWithChildren, ReactNode } from 'react';
import './card.css';

type Props = {
  title: ReactNode;
  gap: number;
  type?: string;
  onTypeChange?: (e: RadioChangeEvent) => void;
  style?: CSSProperties;
  needRadio?: boolean;
};

const Card: FC<PropsWithChildren<Props>> = ({
  children,
  title,
  gap,
  type,
  onTypeChange,
  style,
  needRadio = true,
}) => {
  const options: RadioGroupProps['options'] = [
    {
      label: '月',
      value: '3',
    },
    {
      label: '周',
      value: '2',
    },
    {
      label: '日',
      value: '1',
    },
  ];

  return (
    <Flex gap={gap} vertical className="card-wrapper" style={style}>
      <Flex justify="space-between">
        <div>{title}</div>

        {needRadio ? (
          <Radio.Group
            value={type}
            onChange={onTypeChange}
            options={options}
            optionType="button"
            buttonStyle="solid"
            size="small"
          />
        ) : null}
      </Flex>
      {children}
    </Flex>
  );
};

export default Card;
